<!DOCTYPE html>
<html lang=en>
<head>
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="本篇博客主要讲一些实用的东西，主要将闭包的写法、用法和用途。  一、什么是闭包和闭包的几种写法和用法  1、什么是闭包 闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：　　1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。　　2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。　　简单的">
<meta property="og:type" content="article">
<meta property="og:title" content="闭包">
<meta property="og:url" content="http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/index.html">
<meta property="og:site_name" content="TmoonSite">
<meta property="og:description" content="本篇博客主要讲一些实用的东西，主要将闭包的写法、用法和用途。  一、什么是闭包和闭包的几种写法和用法  1、什么是闭包 闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：　　1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。　　2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。　　简单的">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2018-04-04T01:11:19.000Z">
<meta property="article:modified_time" content="2020-01-07T10:48:14.803Z">
<meta property="article:author" content="Tmoonlight">
<meta name="twitter:card" content="summary">
    
    
        
          
              <link rel="shortcut icon" href="/images/favicon.ico">
          
        
        
          
            <link rel="icon" type="image/png" href="/images/logo2.gif" sizes="192x192">
          
        
        
          
            <link rel="apple-touch-icon" sizes="180x180" href="/images/logo2.gif">
          
        
    
    <!-- title -->
    <title>闭包</title>
    <!-- styles -->
    
<link rel="stylesheet" href="/css/style.css">

    <!-- persian styles -->
    
      
<link rel="stylesheet" href="/css/rtl.css">

    
    <!-- rss -->
    
    
<meta name="generator" content="Hexo 4.2.0"></head>

<body class="max-width mx-auto px3 ltr">
    
      <div id="header-post">
  <a id="menu-icon" href="#"><i class="fas fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#"><i class="fas fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fas fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
         
          <li><a href="/">Home</a></li>
         
          <li><a href="/about/">About</a></li>
         
          <li><a href="/archives/">Writing</a></li>
         
          <li><a href="/projects_url">Projects</a></li>
        
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" href="/2018/04/10/NG%E7%AC%94%E8%AE%B0/"><i class="fas fa-chevron-left" aria-hidden="true" onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();"></i></a></li>
        
        
        <li><a class="icon" href="/2018/03/27/%E6%95%B0%E6%8D%AE%E6%81%A2%E5%A4%8D/"><i class="fas fa-chevron-right" aria-hidden="true" onmouseover="$('#i-next').toggle();" onmouseout="$('#i-next').toggle();"></i></a></li>
        
        <li><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i></a></li>
        <li><a class="icon" href="#"><i class="fas fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i></a></li>
      </ul>
      <span id="i-prev" class="info" style="display:none;">Previous post</span>
      <span id="i-next" class="info" style="display:none;">Next post</span>
      <span id="i-top" class="info" style="display:none;">Back to top</span>
      <span id="i-share" class="info" style="display:none;">Share post</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/" target="_blank" rel="noopener"><i class="fab fa-facebook " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&text=闭包" target="_blank" rel="noopener"><i class="fab fa-twitter " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&title=闭包" target="_blank" rel="noopener"><i class="fab fa-linkedin " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&is_video=false&description=闭包" target="_blank" rel="noopener"><i class="fab fa-pinterest " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=闭包&body=Check out this article: http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/"><i class="fas fa-envelope " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&title=闭包" target="_blank" rel="noopener"><i class="fab fa-get-pocket " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&title=闭包" target="_blank" rel="noopener"><i class="fab fa-reddit " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&title=闭包" target="_blank" rel="noopener"><i class="fab fa-stumbleupon " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&title=闭包" target="_blank" rel="noopener"><i class="fab fa-digg " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&name=闭包&description=" target="_blank" rel="noopener"><i class="fab fa-tumblr " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://news.ycombinator.com/submitlink?u=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&t=闭包" target="_blank" rel="noopener"><i class="fab fa-hacker-news " aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="toc">
      
    </div>
  </span>
</div>

    
    <div class="content index py4">
        
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle" itemprop="name headline">
        闭包
    </h1>



    <div class="meta">
      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">TmoonSite</span>
      </span>
      
    <div class="postdate">
      
        <time datetime="2018-04-04T01:11:19.000Z" itemprop="datePublished">2018-04-04</time>
        
      
    </div>


      

      

    </div>
  </header>
  

  <div class="content" itemprop="articleBody">
    <p>本篇博客主要讲一些实用的东西，主要将闭包的写法、用法和用途。</p>
<p> <strong>一、什么是闭包和闭包的几种写法和用法</strong></p>
<p> <strong>1、什么是闭包</strong></p>
<p>闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：<br>　　1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。<br>　　2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。<br>　　简单的说，Javascript允许使用内部函数—即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。</p>
<p> <strong>2、闭包的几种写法和用法</strong></p>
<p>首先要明白，在JS中一切都是对象，函数是对象的一种。下面先来看一下闭包的5种写法，简单理解一下什么是闭包。后面会具体解释。</p>
<pre><code>//第1种写法  
function Circle(r) {  
      this.r = r;  
}  
Circle.PI = 3.14159;  
Circle.prototype.area = function() {  
  return Circle.PI * this.r * this.r;  
}  

var c = new Circle(1.0);     
alert(c.area());   </code></pre><p>这种写法没什么特别的，只是给函数添加一些属性。</p>
<pre><code>//第2种写法  
var Circle = function() {  
   var obj = new Object();  
   obj.PI = 3.14159;  

   obj.area = function( r ) {  
       return this.PI * r * r;  
   }  
   return obj;  
}  

var c = new Circle();  
alert( c.area( 1.0 ) );  </code></pre><p>这种写法是声明一个变量，将一个函数当作值赋给变量。</p>
<pre><code>//第3种写法  
var Circle = new Object();  
Circle.PI = 3.14159;  
Circle.Area = function( r ) {  
       return this.PI * r * r;  
}  

alert( Circle.Area( 1.0 ) );  </code></pre><p>这种方法最好理解，就是new 一个对象，然后给对象添加属性和方法。</p>
<pre><code>//第4种写法  
var Circle={  
   &quot;PI&quot;:3.14159,  
 &quot;area&quot;:function(r){  
          return this.PI * r * r;  
        }  
};  
alert( Circle.area(1.0) );  </code></pre><p>这种方法使用较多，也最为方便。var obj = {}就是声明一个空的对象。</p>
<pre><code>//第5种写法  
var Circle = new Function(&quot;this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}&quot;);  

alert( (new Circle()).area(1.0) );  </code></pre><p>说实话，这种写法我是没用过，大家可以参考一下。</p>
<p>总的来说，上面几种方法，第2中和第4中较为常见，大家可以根据习惯选择。</p>
<p>上面代码中出现了JS中常用的Prototype，那么Prototype有什么用呢？下面我们来看一下：</p>
<pre><code>var dom = function(){

};

dom.Show = function(){
    alert(&quot;Show Message&quot;);
};

dom.prototype.Display = function(){
    alert(&quot;Property Message&quot;);
};

dom.Display(); //error
dom.Show();  
var d = new dom();
d.Display();
d.Show(); //error</code></pre><p>我们首先声明一个变量，将一个函数赋给他，因为在Javascript中每个函数都有一个Portotype属性，而对象没有。添加两个方法，分别直接添加和添加打破Prototype上面，来看下调用情况。分析结果如下：</p>
<p> 　　 <strong>1、不使用prototype属性定义的对象方法，是静态方法，只能直接用类名进行调用！另外，此静态方法中无法使用this变量来调用对象其他的属性！</strong><br> <strong>2、使用prototype属性定义的对象方法，是非静态方法，只有在实例化后才能使用！其方法内部可以this来引用对象自身中的其他属性！</strong></p>
<p>下面我们再来看一段代码：</p>
<pre><code>var dom = function(){
        var Name = &quot;Default&quot;;
        this.Sex = &quot;Boy&quot;;
        this.success = function(){
            alert(&quot;Success&quot;);
        };
    };

    alert(dom.Name);
    alert(dom.Sex);</code></pre><p>大家先看看，会显示什么呢？ 答案是两个都显示Undefined,为什么呢？这是由于在Javascript中每个function都会形成一个作用域，而这些变量声明在函数中，所以就处于这个函数的作用域中，外部是无法访问的。要想访问变量，就必须new一个实例出来。</p>
<pre><code>var html = {
        Name:&apos;Object&apos;,
        Success:function(){
            this.Say = function(){
                    alert(&quot;Hello,world&quot;);
            };
            alert(&quot;Obj Success&quot;);
        }
    };</code></pre><p>再来看看这种写法，其实这是Javascript的一个”语法糖”，这种写法相当于：</p>
<pre><code>var html = new Object();
html.Name = &apos;Object&apos;;
html.Success = function(){
        this.Say = function(){
                alert(&quot;Hello,world&quot;);
        };
        alert(&quot;Obj Success&quot;);</code></pre><p>变量html是一个对象，不是函数，所以没有Prototype属性，其方法也都是公有方法，html不能被实例化。否则会出现如下错误：</p>
<p>但是他可以作为值赋给其它变量，如var o = html; 我们可以这样使用它：</p>
<pre><code>alert(html.Name);
html.Success();</code></pre><p>说到这里，完了吗？细心的人会问，怎么访问Success方法中的Say方法呢？是html.Success.Say()吗？</p>
<p>当然不是，上面刚说过由于作用域的限制，是访问不到的。所以要用下面的方法访问：</p>
<pre><code>var s = new html.Success();
s.Say();

//还可以写到外面
html.Success.prototype.Show = function(){
    alert(&quot;HaHa&quot;);
};
var s = new html.Success();
s.Show();</code></pre><p>关于Javascript作用域的问题，不是一两句能说清楚的，有兴趣的大家可以网上找些资料看看。</p>
<p> 二、Javascript闭包的用途</p>
<p>事实上，通过使用闭包，我们可以做很多事情。比如模拟面向对象的代码风格；更优雅，更简洁的表达出代码；在某些方面提升代码的执行效率。</p>
<p> <strong>1、匿名自执行函数</strong></p>
<p>　　我们知道所有的变量，如果不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，<br>比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。<br>除了每次使用变量都是用var关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变量无需维护，<br>比如UI的初始化，那么我们可以使用闭包：</p>
<pre><code>var data= {    
    table : [],    
    tree : {}    
};    

(function(dm){    
    for(var i = 0; i &lt; dm.table.rows; i++){    
       var row = dm.table.rows[i];    
       for(var j = 0; j &lt; row.cells; i++){    
           drawCell(i, j);    
       }    
    }    

})(data);   </code></pre><p>我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在函数执行完后会立刻释放资源，关键是不污染全局对象。</p>
<p> <strong>2、结果缓存</strong></p>
<p>我们开发中会碰到很多情况，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，</p>
<p>那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，然后更新缓存并返回值，如果找到了，直接返回查找到的值即可。闭包正是可以做到这一点，因为它不会释放外部的引用，从而函数内部的值可以得以保留。</p>
<pre><code>var CachedSearchBox = (function(){    
    var cache = {},    
       count = [];    
    return {    
       attachSearchBox : function(dsid){    
           if(dsid in cache){//如果结果在缓存中    
              return cache[dsid];//直接返回缓存中的对象    
           }    
           var fsb = new uikit.webctrl.SearchBox(dsid);//新建    
           cache[dsid] = fsb;//更新缓存    
           if(count.length &gt; 100){//保正缓存的大小&lt;=100    
              delete cache[count.shift()];    
           }    
           return fsb;          
       },    

       clearSearchBox : function(dsid){    
           if(dsid in cache){    
              cache[dsid].clearSelection();      
           }    
       }    
    };    
})();    

CachedSearchBox.attachSearchBox(&quot;input&quot;);    </code></pre><p>这样我们在第二次调用的时候，就会从缓存中读取到该对象。</p>
<p> <strong>3、封装</strong></p>
<pre><code> var person = function(){    
    //变量作用域为函数内部，外部无法访问    
    var name = &quot;default&quot;;       

    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
}();    

print(person.name);//直接访问，结果为undefined    
print(person.getName());    
person.setName(&quot;abruzzi&quot;);    
print(person.getName());    

得到结果如下：  

undefined  
default  
abruzzi  </code></pre><p> <strong>4、实现类和继承</strong></p>
<pre><code>function Person(){    
   var name = &quot;default&quot;;       

   return {    
      getName : function(){    
          return name;    
      },    
      setName : function(newName){    
          name = newName;    
      }    
   }    
   };   

   var p = new Person();
   p.setName(&quot;Tom&quot;);
   alert(p.getName());  

   var Jack = function(){};
   //继承自Person
   Jack.prototype = new Person();
   //添加私有方法
   Jack.prototype.Say = function(){
       alert(&quot;Hello,my name is Jack&quot;);
   };
   var j = new Jack();
   j.setName(&quot;Jack&quot;);
   j.Say();
   alert(j.getName());</code></pre><p>我们定义了Person，它就像一个类，我们new一个Person对象，访问它的方法。</p>
<p>下面我们定义了Jack，继承Person，并添加自己的方法。</p>
<p> <strong>个人总结：</strong></p>
<p>Javascript比我们想象的要更加强大和灵活，要学好需要付出很大的努力~~</p>

  </div>
</article>



        
          <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
         
          <li><a href="/">Home</a></li>
         
          <li><a href="/about/">About</a></li>
         
          <li><a href="/archives/">Writing</a></li>
         
          <li><a href="/projects_url">Projects</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      
    </div>

    <div id="share-footer" style="display: none">
      <ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/" target="_blank" rel="noopener"><i class="fab fa-facebook fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&text=闭包" target="_blank" rel="noopener"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&title=闭包" target="_blank" rel="noopener"><i class="fab fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&is_video=false&description=闭包" target="_blank" rel="noopener"><i class="fab fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=闭包&body=Check out this article: http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/"><i class="fas fa-envelope fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&title=闭包" target="_blank" rel="noopener"><i class="fab fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&title=闭包" target="_blank" rel="noopener"><i class="fab fa-reddit fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&title=闭包" target="_blank" rel="noopener"><i class="fab fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&title=闭包" target="_blank" rel="noopener"><i class="fab fa-digg fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&name=闭包&description=" target="_blank" rel="noopener"><i class="fab fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://news.ycombinator.com/submitlink?u=http://yoursite.com/2018/04/04/%E9%97%AD%E5%8C%85/&t=闭包" target="_blank" rel="noopener"><i class="fab fa-hacker-news fa-lg" aria-hidden="true"></i></a></li>
</ul>

    </div>

    <div id="actions-footer">
        <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fas fa-bars fa-lg" aria-hidden="true"></i> Menu</a>
        <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fas fa-list fa-lg" aria-hidden="true"></i> TOC</a>
        <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> Share</a>
        <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up fa-lg" aria-hidden="true"></i> Top</a>
    </div>

  </div>
</div>

        
        <footer id="footer">
  <div class="footer-left">
    Copyright &copy; 2020 Tmoonlight
  </div>
  <div class="footer-right">
    <nav>
      <ul>
         
          <li><a href="/">Home</a></li>
         
          <li><a href="/about/">About</a></li>
         
          <li><a href="/archives/">Writing</a></li>
         
          <li><a href="/projects_url">Projects</a></li>
        
      </ul>
    </nav>
  </div>
</footer>

    </div>
    <!-- styles -->

<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">


<link rel="stylesheet" href="/lib/justified-gallery/css/justifiedGallery.min.css">


    <!-- jquery -->

<script src="/lib/jquery/jquery.min.js"></script>


<script src="/lib/justified-gallery/js/jquery.justifiedGallery.min.js"></script>

<!-- clipboard -->

  
<script src="/lib/clipboard/clipboard.min.js"></script>

  <script type="text/javascript">
  $(function() {
    // copy-btn HTML
    var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"Copy to clipboard!\">";
    btn += '<i class="far fa-clone"></i>';
    btn += '</span>'; 
    // mount it!
    $(".highlight table").before(btn);
    var clip = new ClipboardJS('.btn-copy', {
      text: function(trigger) {
        return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str,it)=>str+it.innerText+'\n','')
      }
    });
    clip.on('success', function(e) {
      e.trigger.setAttribute('aria-label', "Copied!");
      e.clearSelection();
    })
  })
  </script>


<script src="/js/main.js"></script>

<!-- search -->

<!-- Google Analytics -->

<!-- Baidu Analytics -->

<!-- Disqus Comments -->


</body>
</html>
